<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录界面</title>
  <link rel="stylesheet" href="../../re/css/login.css" >
  <link rel="stylesheet" href="../../re/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../re/css/bootstrap-table.min.css">
  <link rel="stylesheet" href="../../re/css/font-awesome.min.css">      
  
  </head>
  <body bgcolor=#cccccc background="../../re/images/780.jpg">
<div  id="app" class="my-page">

            <form class="my-login"  method="post">

                <div class="my-title" >宜染在线信息系统</div>

                <div class="my-error"></div>

                <div class="my-item" >
                   	 用户名：
                   <input type="text"  v-model="Sys_userDto.u_id" placeholder="请输入用户名" > 
                </div>

                <div class="my-item" >
                  	密码：
                     <input type="password" v-model="Sys_userDto.u_pwd" placeholder="请输入密码" >
                </div>
				
				<div class="my-item">
					验证码：
                <input type="text" v-model="Sys_userDto.yzm" placeholder="请输入验证码" required=" ">
                <img  id="im" src="../../validate" > 
                 <a  @click="refresh" style="height: 30px;width: 100px;">换一张</a> 
    
                </div>
              <div  style="margin-top:15px;" >
                    <button type="button"  @click.prevent="login"  style="height: 30px;width: 100px;">登录</button>
                   <input type="reset"  value="重置" style="height: 30px;width: 100px;">
                </div>
       
<br>
            </form>


        </div>
  </body>
  
  
 	<script type="text/javascript" src="../../re/js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="../../re/layer/layer.js"></script>
	<script type="text/javascript" src="../../re/js/sweetalert2.all.min.js"></script>
	<script type="text/javascript" src="../../re/js/vue.min.js"></script>
	<script type="text/javascript" src="../../re/js/my-sweetalert2.js"></script>	
	<script type="text/javascript" src="../../re/js/axios.min.js"></script>
	<script type="text/javascript" src="../../re/js/my.js"></script>
	
 <script type="text/javascript">
    //此处书写JavaScript代码
    //Vue Vue 简单的说Vue是依据服务器端数据对界面进行渲染的 
    new Vue({
        el:'#app',//指明需要渲染的元素
        data:{//定义Vue的数据
        	Sys_userDto:{},//定义对象admin
        },
        methods:{//定义Vue的方法
             login(){
        	
            	let loadIdx = layer.load();//显示加载提示
            	$axios.post('login',this.Sys_userDto)
				.then((response) => {//then：成功响应，响应代码为200
					//alert("xxx");
					let result = response.data;
					
					layer.close(loadIdx);//关闭加载提示
					if(result.success){
						
						Swal.fire({
						  type: 'success',
						  title: result.message,
						  showConfirmButton: false,
						  timer: 1500
						});
						 setTimeout(()=>{//延时执行
	                    	 location.href='../home/index.html'; 
	     					},1500);
						 //layer.alert(result.message, {icon: 1});
						//alert(result.message);
						
					}else{
						alert(result.message);
					}
				 })
				 .catch(function (error) {//catch:失败响应
					 console.log(error);
					 layer.close(loadIdx);//关闭加载提示
					 layer.alert("错误！", {icon: 2});
				 });
            	
        	  },

            refresh(){//换一张验证码
            	var temp=document.getElementById('im');
            	now =new Date();
            	temp.src="../../validate?code="+now.getTime();
            	//console.log("执行换一张方法");
            	
            },
        }

    });

	
	
	</script>
</html>